import React,{useEffect,useState} from 'react'
import {useDispatch,useSelector} from "react-redux"
import * as action from "../../action"
import { ProductCard } from 'react-vant';
import {useNavigate} from "react-router-dom"
import Luo from 'iscroll-luo';
import { Sidebar, SidebarItem } from 'react-vant';
function Index() {
  const [active, setActive] = useState(0);
  let navigate = useNavigate()
  let store = useSelector(state=>({...state.shopreducer}))
  let dispacth = useDispatch()
  useEffect(()=>{
     dispacth(action.getlist()) // 第一步，dispacth触发action里的方法
  },[])
  let goDetail = (item)=>{
     navigate("/detail",{
       state:item
     })
  }
  let onUp = ()=>{   // 上拉加载
    dispacth(action.getlist("up"))
  }
  let onDown = ()=>{ // 下拉刷新
    dispacth(action.getlist())
  }
  return (
    <div style={{display:"flex",width:"100vw"}}>
       <Sidebar
           onChange={(v) => {
            console.log(v,"v");
             dispacth(action.getlist())
          }}
       >
          <Sidebar.Item title="标签名" />
          <Sidebar.Item title="标签名" />
          <Sidebar.Item title="标签名" />
      </Sidebar>
        <div style={{ position: 'relative', height: '90vh',width:'100%' }}>
      <Luo
  				id='id'
  				onDown={() => onDown()}
          onUp={() =>onUp()}
  		>
      {
        store.arr ?. map ((item,index)=>{
          return  <ProductCard
          key={index}
          num={item.num}
          price={item.price}
          desc={item.des}
          title={item.tit}
          thumb={item.img}
          onClick={()=>{goDetail(item)}}
        />
        })
      }
      </Luo>
    </div>
    </div>
  
  )
}

export default Index